<template>
  <div>
    <!-- 表单信息填写 -->
    <Card style="margin-bottom:20px;">
      <Form :model="superviseForm" style="display: block;">
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Cascader change-on-select :data="organizationList" v-model="superviseForm.managecom" placeholder="续期外勤机构"
                clearable></Cascader>
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="续期外勤姓名" v-model="superviseForm.agentname" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <Input placeholder="投保人姓名" v-model="superviseForm.appntname" />
            </FormItem>
          </i-col>
          <i-col span="6">
            <FormItem>
              <DatePicker v-model="superviseForm.PayableRange" type="daterange" placeholder="应交日时间段" :editable="false"
                style="width:100%" @on-change="changePayableRange"></DatePicker>
            </FormItem>
          </i-col>
        </Row>
        <Row gutter="40">
          <i-col span="6">
            <FormItem>
              <Select v-model="superviseForm.payWay" placeholder="交费方式" @on-change="changePayWay" clearable>
                <Option v-for="item in payWayList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
          <i-col span="6">
            <Row>
              <i-col span="11">
                <FormItem prop="rangeminprem">
                  <Input placeholder="最低应收保费" v-model="superviseForm.rangeminprem" type="number"
                    @on-blur="decimalConversion(superviseForm.rangeminprem)" />
                </FormItem>
              </i-col>
              <i-col span="2" style="text-align:center;line-height:30px">-</i-col>
              <i-col span="11">
                <FormItem prop="rangemaxprem">
                  <Input placeholder="最高应收保费" v-model="superviseForm.rangemaxprem" type="number"
                    @on-blur="decimalConversion2(superviseForm.rangemaxprem)" />
                </FormItem>
              </i-col>
            </Row>
          </i-col>
        </Row>

        <Row>
          <Button type="primary" @click="handleSubmit()" style="margin-right:20px" :loading="queryLoading">查询</Button>
          <Button @click="handleReset()">重置</Button>
        </Row>
      </Form>
    </Card>
    <!-- 表格信息 -->
    <Card>

      <Table :columns="chargeColumns" :data="chargeData" @on-selection-change="selectionChange"
        @on-sort-change="sortChange" :row-class-name="rowClassName">
        <template slot-scope="{row}" slot="agentcode">
          <span>{{ row.agentname }}</span>
        </template>
        <template slot-scope="{row}" slot="payyears">
          <span>{{ row.payyear && row.payyears ? (row.payyear + '/' + row.payyears + row.payintvname) : '' }}</span>
        </template>
        <template slot-scope="{row}" slot="remainvaliddays">
          <span>{{ row.remainvaliddays ? (row.remainvaliddays + '天') : '' }}</span>
        </template>
        <template slot-scope="{row}" slot="contno">
          <span v-if="row.contno == ''">-</span>
          <span v-else>{{ row.contno }}</span>
        </template>
        <template slot-scope="{row}" slot="appntname">
          <span v-if="row.appntname == ''">-</span>
          <span v-else>{{ row.appntname }}</span>
        </template>
        <template slot-scope="{row}" slot="planstatename">
          <!-- <span @click="forward(row)">{{row.planstatename}}</span>
           -->
          <span v-if="row.planstatename == '有效'">
            <Button size="small"
              style="border-radius: 14px;background-color:rgb(24,144,255);color:#fff;padding-left:15px;padding-right:15px"
              @click="forward(row)">有效</Button>
          </span>
          <span v-if="row.planstatename == '失效'">
            <Button @click="forward(row)" size="small"
              style="border-radius:14px;width: 58px;padding-left:15px;padding-right:15px">失效</Button>
          </span>
          <span v-if="row.planstatename == '终止'">
            <Button @click="forward(row)" size="small"
              style="border-radius: 14px;background-color:rgb(255,141,26);color:#fff;padding-left:15px;padding-right:15px">终止</Button>
          </span>
        </template>
      </Table>
      <Page :total="total" show-sizer show-total style="text-align:right;margin-top:20px" @on-change="pageChange"
        @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeOptions" :current="pageIndex" :page-size="pageSize"
        transfer></Page>
    </Card>
    <div class="contain" ref="mybox">
      <canvas id="myCanvas" width="200" height="100" ref="myCanvas" style="position: absolute;"></canvas>
    </div>
  </div>
</template>

<script>
import util from "../../../util/util";
import { drawSign } from '../../../util/drawSign';

export default {
  name: 'nn',
  props: {
    payWayList: {
      type: Array
    }
  },
  data() {
    return {
      superviseForm: {
        managecom: "",
        agentname: "",
        appntname: "",
        PayableRange: ["", ""],
        rangeminprem: "",
        rangemaxprem: "",
        payWay: '',
        // rangeminpaytodate: "",
        // rangemaxpaytodate: "",
      },
      organizationList: [],
      //表格
      chargeColumns: [
        // {
        //   type: "selection",
        //   align: "center",
        //   fixed: "left",
        //   width: 60
        // },
        {
          title: "保单号",
          key: "contno",
          align: "center",
          width: "200",
          fixed: "left",
          slot: "contno"
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "170",
          slot: "appntname"
        },
        {
          title: "续期外勤姓名",
          key: "agentcode",
          align: "center",
          width: "200",
          slot: "agentcode"
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "200",
          sortable: true,
          sortable: "paytodate"
        },
        {
          title: "应交次数",
          key: "payyears",
          align: "center",
          width: "200",
          slot: "payyears"
        },
        {
          title: "应收保费(元)",
          key: "sumprem",
          align: "center",
          width: "200",
          sortable: true,
          sortable: "sumprem"
        },
        {
          title: "距离失效天数",
          key: "remainvaliddays",
          align: "center",
          width: "200",
          // sortable: true,
          // sortable: "remainvaliddays",
          slot: "remainvaliddays"
        },
        {
          title: "保单状态",
          key: "planstatename",
          align: "center",
          width: "130",
          slot: "planstatename",
          fixed: "right",
          sortable: true,
          sortable: "planstatename"
        }
      ],
      chargeData: [],
      but: ["primary", "default", "default", "default"],
      workTypeList: [],
      applyStatusList: [],
      selection: [],
      selectLength: "0",
      total: "0",
      pageSizeOptions: [5, 10, 15, 20],
      pageIndex: 1,
      pageSize: 10,
      queryLoading: false,
      historyObj: null,
      flagIndex: 0,
      planstatenameorder: 0,//工作状态排序
      premorder: 0,//保费排序
      paytodateorder: 0,//应交日排序
    };
  },
  methods: {
    // 跳转
    forward(row) {
      // console.log(row);
      // console.log(this.pageObj)
      // console.log(this.pageObj.rangeminpaytodate)
      this.pageObj.rangeminpaytodate = this.timeFormat(this.pageObj.rangeminpaytodate)
      this.pageObj.rangemaxpaytodate = this.timeFormat(this.pageObj.rangemaxpaytodate)

      sessionStorage.setItem("QUERYOBJ", JSON.stringify(this.pageObj));
      sessionStorage.setItem("QUERYFORM", JSON.stringify(this.superviseForm));
      sessionStorage.setItem("INSURANCE_TYPE2", "未计划");
      this.$router.push({
        // name: "serviceDetail",
        path: "serviceDetail",
        query: {
          row: row,
          insuranceType: "noplan",
          type: "policyEnquiry"
        }
      });
    },
    //行样式
    rowClassName(row, index) {
      if (index > 6) return 'table-row-orange1';
      else return ''
      // if (row.facerecordflag == '0') {
      //   return 'table-row-red1';
      // } else if (row.visitflag == '0') {
      //   return 'table-row-orange1';
      // }
      // return '';
    },
    // 工作计划时间段
    changePayableRange(date) {
      // console.log(date)
      this.superviseForm.PayableRange = date;
    },

    // // 工作完成时间段
    // changWorkEndRange(date){
    //   // console.log(date)
    //   this.superviseForm.workEndRange = date;
    // },

    // // 工作录入时间段
    // changeShouldPayRange(date){
    //   // console.log(date)
    //   this.superviseForm.shouldPayRange = date;
    // },

    // 工作统计下拉框信息
    getProfessionalList() {
      this.api.professionalList().then(res => {
        if (res.code == 200 && res.data != null) {
          // if (res.data.planListVOS) {
          //   this.workStatusList = res.data.planListVOS;
          // }
          // if (res.data.listKeyValueVOS) {
          //   this.organizationList = res.data.listKeyValueVOS;
          // }
          if (res.data.listKeyValueVOS) {
            this.organizationList = res.data.listKeyValueVOS;
          }
        } else {
          this.organizationList = [];
        }
      });
    },
    //表单---保单金额排序asc
    sortChange(column, key, order) {
      //保费排序
      if (column.key == "sumprem") {
        // 应收保费
        if (column.order == "asc") {
          // 升序
          this.premorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.premorder = 2;
        } else {
          // 默认
          this.planstatenameorder = 0;
        }
      }
      //保费排序
      if (column.key == "paytodate") {
        // 应收保费
        if (column.order == "asc") {
          // 升序
          this.paytodateorder = 1;
        } else if (column.order == "desc") {
          // 降序
          this.paytodateorder = 2;
        } else {
          // 默认
          this.paytodateorder = 0;
        }
      }
      this.handleSubmit(999);
      // console.log(column, key, order);
    },
    // 重置
    handleReset() {
      this.superviseForm = {
        agentname: "",
        appntname: "",
        PayableRange: ["", ""],
        rangeminprem: "",
        rangemaxprem: "",
        payWay: '',
      };
    },

    // 根据管理机构查询续期专员
    organizationChange(value) {
      if (!value) {
        this.reagentNameList = [];
      } else {
        $.ajax("scrm-gateway/scrm-uer/api/List/sekectreangencode/" + value, {
          method: "get",
          contentType: "application/json;charset=utf-8",
          headers: {
            Authorization: sessionStorage.getItem("credentials")
          },
          success: res => {
            if (res.code == 200 && res.data != null) {
              this.reagentNameList = res.data;
            } else {
              this.reagentNameList = [];
            }
          },
          error: res => {
            this.$Message.error(res.msg);
          }
        });
      }
    },
    //点击按钮变绿，其他default


    // 表格选中
    selectionChange(selection) {
      this.selection = selection;
      this.selectLength = selection.length;
    },

    // 分页设置
    pageChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.pageSubmit();
    },
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageSubmit();
    },


    // 查询
    handleSubmit(index) {
      // if (util.formNullValidate(this.superviseForm)) {
      //   this.$Message.info("至少选择一个条件");
      //   return false;
      // }
      if (this.historyObj == null) {
        if (index >= 0) {
        } else {
          let arr = ["default", "default", "default", "default"];
          arr[0] = "primary";
          this.but = arr;
          this.queryLoading = true;
          this.pageIndex = 1;
        }
        // this.pageIndex = 1;
        // this.pageSize = 10;
      }

      let obj = {
        useragentcode: sessionStorage.getItem("useragentcode") || null,
        appntname: this.superviseForm.appntname || null,
        managecom: this.superviseForm.managecom[this.superviseForm.managecom.length - 1] || null,
        agentname: this.superviseForm.agentname || null,
        rangeminprem: this.superviseForm.rangeminprem || null, useragentcode: sessionStorage.getItem("useragentcode") || null,
        rangemaxprem: this.superviseForm.rangemaxprem || null,
        rangeminpaytodate: this.superviseForm.PayableRange[0] || null,
        rangemaxpaytodate: this.superviseForm.PayableRange[1] || null,
        index: this.pageIndex,
        pageSize: this.pageSize,
        payintv: this.superviseForm.payWay ? this.superviseForm.payWay : null,
        // premorder:0,
        // paytodateorder: 0,



        // planstate: this.superviseForm.workStatus
        //   ? this.superviseForm.workStatus
        //   : null,
        // rangeminappointeddate: this.superviseForm.workPlanRange[0] ? this.superviseForm.workPlanRange[0]:null,
        // rangemaxappointeddate: this.superviseForm.workPlanRange[1] ? this.superviseForm.workPlanRange[1]:null,
        // rangeminfishdate: this.superviseForm.workEndRange[0] ? this.superviseForm.workEndRange[0]:null,
        // rangemaxfishdate: this.superviseForm.workEndRange[1] ? this.superviseForm.workEndRange[1]:null,
        // rangeminControllerDate: this.superviseForm.shouldPayRange[0] ? this.superviseForm.shouldPayRange[0]:null,
        // rangemaxControllerDate: this.superviseForm.shouldPayRange[1] ? this.superviseForm.shouldPayRange[1]:null,
        // originatorname: this.superviseForm.startName
        //   ? this.superviseForm.startName
        //   : null,
        // reagentcode: this.superviseForm.reagentOrganization
        //   ? this.superviseForm.reagentOrganization
        //   : null,
        // reagentList: this.superviseForm.reagentName
        //   ? this.superviseForm.reagentName + ""
        //   : null,
        // chargeStatus: this.chargeStatus ? this.chargeStatus : null,//收费预估20200918 wy
        // isVisited: this.isVisited ? this.isVisited : null,//是否面访20200918 wy

        // selecttag: this.flagIndex,
        // planstatenameorder: this.planstatenameorder,//工作状态排序20200918 wy
      };
      this.pageObj = obj;
      // this.api.selectworkStatisticsNotPlan(obj).then(res => {
      let res = {
        code: 200, data: {
          "records": [
            {
              "contno": "0005274622841888",
              "appntname": "保修七",
              "agentcode": null,
              "agentname": null,
              "agentstate": "01",
              "paytodate": "2024-01-01 00:00:00",
              "payyear": 1,
              "payyears": 10,
              "payintvname": "年交",
              "sumprem": 10000,
              "remainvaliddays": "-231",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "1",
              "facerecordflag": "1"
            },
            {
              "contno": "0004936821921888",
              "appntname": "张帆",
              "agentcode": null,
              "agentname": null,
              "agentstate": "01",
              "paytodate": "2022-10-14 00:00:00",
              "payyear": 1,
              "payyears": 10,
              "payintvname": "年交",
              "sumprem": 5000,
              "remainvaliddays": "213",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            },
            {
              "contno": "0004735821391888",
              "appntname": "江旭文",
              "agentcode": null,
              "agentname": null,
              "agentstate": "01",
              "paytodate": "2022-10-12 00:00:00",
              "payyear": 1,
              "payyears": 6,
              "payintvname": "年交",
              "sumprem": 513.2,
              "remainvaliddays": "215",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            },
            {
              "contno": "0004170420061888",
              "appntname": "迪迪",
              "agentcode": "860100004",
              "agentname": "黄yb",
              "agentstate": "01",
              "paytodate": "2020-12-31 00:00:00",
              "payyear": 0,
              "payyears": 5,
              "payintvname": "年交",
              "sumprem": 2374.7,
              "remainvaliddays": "865",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            },
            {
              "contno": "0004170719811888",
              "appntname": "龏莒",
              "agentcode": "860100004",
              "agentname": "黄yb",
              "agentstate": "01",
              "paytodate": "2020-12-26 00:00:00",
              "payyear": 1,
              "payyears": 3,
              "payintvname": "年交",
              "sumprem": 3796,
              "remainvaliddays": "870",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            },
            {
              "contno": "0004170019661888",
              "appntname": "等等",
              "agentcode": "860100004",
              "agentname": "黄yb",
              "agentstate": "01",
              "paytodate": "2020-12-25 00:00:00",
              "payyear": 1,
              "payyears": 5,
              "payintvname": "年交",
              "sumprem": 2458.4,
              "remainvaliddays": "871",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            },
            {
              "contno": "0004121819171888",
              "appntname": "王培培",
              "agentcode": "860100004",
              "agentname": "黄yb",
              "agentstate": "01",
              "paytodate": "2020-10-24 00:00:00",
              "payyear": 1,
              "payyears": 10,
              "payintvname": "年交",
              "sumprem": 3278,
              "remainvaliddays": "933",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            },
            {
              "contno": "0004084719951888",
              "appntname": "孔祥欣",
              "agentcode": "860100004",
              "agentname": "黄yb",
              "agentstate": "01",
              "paytodate": "2020-08-02 00:00:00",
              "payyear": 1,
              "payyears": 10,
              "payintvname": "年交",
              "sumprem": 68635,
              "remainvaliddays": "1016",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            },
            {
              "contno": "0004041019871888",
              "appntname": "丁HG",
              "agentcode": "860100004",
              "agentname": "黄yb",
              "agentstate": "01",
              "paytodate": "2020-08-01 00:00:00",
              "payyear": 1,
              "payyears": 15,
              "payintvname": "年交",
              "sumprem": 3238.5,
              "remainvaliddays": "1017",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            },
            {
              "contno": "0004041519701888",
              "appntname": "丁HG",
              "agentcode": "860100004",
              "agentname": "黄yb",
              "agentstate": "01",
              "paytodate": "2020-08-01 00:00:00",
              "payyear": 1,
              "payyears": 15,
              "payintvname": "年交",
              "sumprem": 3238.5,
              "remainvaliddays": "1017",
              "planstatename": "有效",
              "isassaginment": "2",
              "visitflag": "0",
              "facerecordflag": "1"
            }
          ],
          "total": "10",
          "size": "10",
          "current": "1",
          "orders": [],
          "searchCount": true,
          "pages": "1"
        }
      }
      if (res.code == 200 && res.data != null) {
        this.queryLoading = false;
        this.historyObj = null;
        if (res.data.records && res.data.total > 0) {
          this.total = res.data.total;
          this.chargeData = res.data.records;
          this.chargeData.forEach(element => {
            if (element.paytodate) {
              element.paytodate = element.paytodate.substr(0, 10);
            }
            if (element.payyear && element.payyears && element.payintvname) {
              element.payCount =
                element.payyear +
                "/" +
                element.payyears +
                element.payintvname;
            }
            if (element.appointeddate) {
              element.appointeddate = element.appointeddate.substr(0, 10);
            }
            if (element.fishdate) {
              element.fishdate = element.fishdate.substr(0, 10);
            }
            if (element.reagentcode && element.reagentname) {
              element.reagent =
                element.reagentname + "-" + element.reagentcode;
            }
          });
          if (index != 1000) {
            this.$Message.info(res.msg);
          }
        } else {
          this.total = 0;
          this.chargeData = [];
          this.$Message.info("查询数据为空");
        }
      } else {
        this.queryLoading = false;
        this.total = 0;
        this.chargeData = [];
        this.$Message.info(res.msg);
      }
      // });
    },
    timeFormat(time) {
      if (!time) {
        return ''
      }
      let d = new Date(time)
      var y = d.getFullYear();
      var m = d.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      var day = d.getDate();
      if (day < 10) {
        day = "0" + day;
      }
      return y + "-" + m + "-" + day;
    },
    // 分页查询
    pageSubmit() {
      this.pageObj.index = this.pageIndex;
      this.pageObj.pageSize = this.pageSize;
      this.api.selectworkStatisticsNotPlan(this.pageObj).then(res => {
        if (res.code == 200 && res.data != null) {
          this.queryLoading = false;
          if (res.data.records && res.data.total > 0) {
            this.total = res.data.total;
            this.chargeData = res.data.records;
            this.chargeData.forEach(element => {
              if (element.paytodate) {
                element.paytodate = element.paytodate.substr(0, 10);
              }
              if (element.payyear && element.payyears && element.payintvname) {
                element.payCount =
                  element.payyear +
                  "/" +
                  element.payyears +
                  element.payintvname;
              }
              if (element.appointeddate) {
                element.appointeddate = element.appointeddate.substr(0, 10);
              }
              if (element.fishdate) {
                element.fishdate = element.fishdate.substr(0, 10);
              }
              if (element.reagentcode && element.reagentname) {
                element.reagent =
                  element.reagentname + "-" + element.reagentcode;
              }
            });
          } else {
            this.total = 0;
            this.chargeData = [];
            this.$Message.info("查询数据为空");
          }
        } else {
          this.queryLoading = false;
          this.total = 0;
          this.chargeData = [];
          this.$Message.info(res.msg);
        }
      });
    },
    draw(ele, loginUser, loginTime) {
      let imageUrl = drawSign(ele, loginUser, loginTime)
      document.getElementsByClassName("ivu-table-fixed-body")[6].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[6].classList.add("add-background")
      document.getElementsByClassName("ivu-table-fixed-body")[7].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-fixed-body")[7].classList.add("add-background")

      document.getElementsByClassName("ivu-table-body")[3].style.background = 'url(' + imageUrl + ') left top repeat'
      document.getElementsByClassName("ivu-table-body")[3].classList.add("add-background")
    },
    getOrganization() {
      this.api.remanagecomList().then(res => {
        if (res.code == 200 && res.data != null) {
          let arr = []
          arr.push(res.data)
          arr.forEach(one => {
            one.value = one.comcode
            one.label = one.comcode + '-' + one.name
            one.children = one.chilDren || []
            if (one.children) {
              one.chilDren.forEach(two => {
                two.value = two.comcode
                two.label = two.comcode + '-' + two.name
                two.children = two.chilDren || []
                if (two.children) {
                  two.children.forEach(three => {
                    three.value = three.comcode
                    three.label = three.comcode + '-' + three.name
                    three.children = three.chilDren || []
                    if (three.children) {
                      three.children.forEach(four => {
                        four.value = four.comcode
                        four.label = four.comcode + '-' + four.name
                        four.children = four.chilDren || []
                      })
                    }
                  })
                }
              })
            }
          })
          console.log(arr);
          this.organizationList = arr
        } else {
          this.organizationList = [];
        }
      });
    }
  },
  created() {
    if (sessionStorage.getItem("INSURANCE_TYPE2") == "未计划") {
      if (sessionStorage.getItem("QUERYOBJ")) {
        // 二次筛选条件
        this.historyObj = JSON.parse(sessionStorage.getItem("QUERYOBJ"));
        this.flagIndex = this.historyObj.selecttag;
        let arr = ["default", "default", "default", "default"];
        arr[this.flagIndex] = "primary";
        this.but = arr;
        this.pageIndex = this.historyObj.index;
        this.pageSize = this.historyObj.pageSize;

        // 单次查询条件
        this.superviseForm = JSON.parse(sessionStorage.getItem("QUERYFORM"));
        this.organizationChange(this.superviseForm.reagentOrganization);
        // console.log('工作录入时间段:' + this.superviseForm.shouldPayRange);
        // console.log('工作计划时间段:' + this.superviseForm.workPlanRange);
        // console.log('工作完成时间段:' + this.superviseForm.workEndRange);
        // console.log(this.historyObj, this.superviseForm);



        sessionStorage.removeItem("QUERYOBJ");
        sessionStorage.removeItem("QUERYFORM");
        // sessionStorage.removeItem("INSURANCE_TYPE");
      }
    }
  },
  mounted() {
    this.getOrganization()
    // this.getProfessionalList();
    if (this.historyObj) {
      this.handleSubmit(1000)
    }
    let loginUser = sessionStorage.getItem("name");
    let loginTime =
      new Date().getFullYear() +
      "/" +
      (new Date().getMonth() + 1) +
      "/" +
      (new Date().getDate());
    this.draw(this.$refs.myCanvas, loginUser, loginTime)
  },
  beforeDestroy() {
    this.chargeData = null
  }
};
</script>
<style scoped lang="less">
@import "./index";
</style>
<style>
.ivu-modal-header {
  background-color: #2d8cf0;
}

.ivu-modal-close .ivu-icon-ios-close {
  color: #fff;
}
</style>
